// @flow
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import '../static/css/header.css';
import { inject, observer } from 'mobx-react';
import $ from 'jquery';

@inject('coins')
@observer	
export default class Header extends React.Component<Props> {
  props: Props;
  constructor(props) {
    super(props)

    let coins = this.props.coins.currentCoins

    this.state = {
      coins: coins
    }
    // contextmenu
    // document.addEventListener('contextmenu', this._handleContextMenu);
  }

  componentDidMount() {
    var allA =  $('.navtab li a')
    allA.click(function () {
      allA.css({ 'opacity': '0.75' })
      allA.parent().css({'border-bottom': 'none'})
      $(this).parent().css({'border-bottom': '3px solid #fff'})
      $(this).css({'opacity': '1'})
    })
  }

  forbidContextmenu = () => {
    console.log('wqerwe')
    return false;
  }

  render() {
    return (
      <div className="navbar" onContextMenu={() => { return false }}>
        <ul className="navtab">
          <li>
            <Link to="/">
              <i className="fa fa-line-chart" aria-hidden="true"></i>
              行情
              </Link>
          </li>
          <li>
            <Link to="/Wallets">
              <i className="fa fa-credit-card" aria-hidden="true"></i>
              钱包
              </Link>
          </li>
          <li>
            <Link to="/Send">
              <i className="fa fa-exchange" aria-hidden="true"></i>
              交易
              </Link>
          </li>
          <li>
            <Link to="/Send">
              <i className="fa fa-codepen" aria-hidden="true"></i>合约
              </Link>
          </li>
        </ul>
        <div className="balance">
          <div>
            <div>
              {this.state.coins} 总币量 ：
              </div>
            <div>
              <span>123456.89</span><span> {this.state.coins}</span>
            </div>
          </div>
        </div>
        <div className="main-net">
          <div>Main NET</div>
          <div className="block-detail">
            <div>
              <span>
                <i className="fa fa-code-fork" aria-hidden="true"></i>
              </span>&nbsp;
              <span>1232</span>
            </div>
            <div>
              <span>
                <i className="fa fa-linode" aria-hidden="true"></i>
              </span>&nbsp;
              <span>103579</span>
            </div>
            <div>
              <span>
                <i className="fa fa-signal" aria-hidden="true"></i>
              </span>&nbsp;
              <span>103</span> ms
            </div>
          </div>
        </div>

      </div>
    );
  }
}
